import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  SectionList,
  StatusBar,
} from 'react-native';

const DATA = [
  {
    title: '功能',
    data: ['主菜', '配菜', '饮料', '甜品'],
  },
  {
    title: '特色',
    data: ['小吃', '烘焙', '烤肉', '美食'],
  },
  {
    title: '项目',
    data: ['活动', '服务', '商城', '其他'],
  },

  {
    title: '甜品',
    data: ['冰淇淋', '巧克力', '蛋糕', '饼干'],
  }
];

export default class Switch_StatusBar extends SectionList{
    constructor(){
        super()
        this.state = {
            isFresh: false
        }
    }
    loadData = () => {
        this.setState({
            isFresh: true
        })
        //等待2秒
        setTimeout(
            () => {
                this.setState({
                    isFresh: false
                })
                alert('刷新完成')
            },2000)
    }
    render() {
        return (
            <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({item}) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item}</Text>
        </View>
      )}
      renderSectionHeader={({section: {title}}) => (
        <Text style={styles.header}>{title}</Text>
      )}
      ItemSeparatorComponent={()=>{
        // 自定义分割线样式
        return <View style={{height: 1, backgroundColor: '#ccc'}}></View>
      }}
      ListEmptyComponent={() => {
        // 自定义空列表样式
        return <Text style={{textAlign: 'center',fontSize: 26,marginTop: 20, color: '#999'}}>暂无数据</Text>
      }}
      // 上拉刷新
      refreshing={this.state.isFresh}
      onRefresh={this.loadData}
      // 下拉刷新
      onEndReachedThreshold={0.1}// 距离底部距离小于10%时触发加载更多数据
      onEndReached={this.loadData}

      ListHeaderComponent={()=>{
        // 自定义头部样式
        return <View style={{height: 100, backgroundColor: '#f66'}}></View>
      }}
      ListFooterComponent={()=>{
        // 自定义尾部样式
        return <View style={{height: 100, backgroundColor: '#f66'}}></View>
      }}
    />
  </SafeAreaView>
        )
    }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
    marginHorizontal: 16,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  header: {
    fontSize: 32,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
  },
});